<template>
  <!-- 云图、雷达图 时间 -->
  <div
    class="GykjMap-CloudRadarTime GykjMap-clear"
    :class="cloudRadarClass">
    <div class="GykjMap-radarTime GykjMap-pull-right" v-if="layers['radarLayer']">
      雷达图：{{layers['radarLayer'].dateTime}}
      <span class="iconfont icon-8" @click="refreshAnimate({layerName: 'radarLayer'})"></span>
    </div>
    <div class="GykjMap-cloudTime GykjMap-pull-right" v-if="layers['cloudLayer']">
      云图：{{layers['cloudLayer'].dateTime}}
      <span class="iconfont icon-8" @click="refreshAnimate({layerName: 'cloudLayer'})"></span>
    </div>
  </div>
</template>

<script>
import * as Utils from '../../util'

export default {
  props: {
    Map: {},
    layers: {}
  },
  data () {
    return {
      cloudRadarClass: ''
    }
  },
  methods: {
    refreshAnimate ({ layerName } = {}) {
      if (!layerName || !this.layers[layerName]) {
        return
      }

      this.layers[layerName].interval(this.layers[layerName])
    },
    initData (res, layerOptions) {
      const { cloudRadarClass } = layerOptions

      if (cloudRadarClass) {
        this.cloudRadarClass = cloudRadarClass
      }

      Utils.createAnimate({
        Map: this.Map,
        ...res.animateData
      }, () => {
        this.Map.addLayer(res.layer)
        res.interval(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .GykjMap-CloudRadarTime {
    position: absolute;
    right: 0;
    top: 10px;
    color: red;
    font-size: 22px;
    > div {
      font-weight: 700;
      margin-right: 10px;
      > .iconfont {
        color: black;
        cursor: pointer;
        font-size: 18px;
      }
    }
  }
</style>
